<template>
  <div>
    <vxe-toolbar ref="xToolbar" :loading="loading > 0">
      <template #buttons v-if="groupList.length > 0">
        {{$t('m.common.label.app')}}：
        <a-select v-model="groupId" style="width: 200px;" @change="changeGroupId">
          <a-select-option v-for="item in groupList" :key="item.key" :value="item.key" class="vxe-table--ignore-clear">
            {{ item.title }}
          </a-select-option>
        </a-select>
        <span class="action-button-gap"></span>
        {{$t('m.common.label.team')}}：
        <a-select v-model="tableName" style="width: 200px;" @change="changeTableName">
          <a-select-option v-if="item.key === common || item.attributes.groupId === groupId"
                           v-for="item in tableNameList" :key="item.key" :value="item.key"
                           class="vxe-table--ignore-clear">
            {{ item.title }}
          </a-select-option>
        </a-select>
      </template>
    </vxe-toolbar>

    <!--    @cell-click="selected"-->
    <vxe-table
      header-align="center"
      border
      keep-source
      show-overflow
      show-header-overflow
      ref="xTable"
      :row-config="{isHover: true, keyField: 'id'}"
      :loading="loading > 0"
      :data="tableData"
      :edit-rules="validRules"
      :column-config="{resizable: true}"
      :edit-config="{trigger: 'click', mode: 'row', showUpdateStatus: true, showInsertStatus: true}">
      <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
      <vxe-column field="code" :title="$t('m.common.label.code')"></vxe-column>
      <vxe-column field="zhCn" :title="$t('m.common.label.Chinese')"></vxe-column>
      <vxe-column field="enUs" :title="$t('m.common.label.English')"></vxe-column>
      <vxe-column :title="$t('m.common.label.operate')" width="100" align="center">
        <template #default="{ row }">
          <a @click="selected({row})">{{$t('m.common.button.select')}}</a>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      border
      size="small"
      :loading="loading > 0"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :page-sizes="tablePage.pageSizes"
      :layouts="tablePage.layouts"
      @page-change="handlePageChange">
    </vxe-pager>
  </div>
</template>

<script>

import {getAction} from '@/api/manage'
import YchConstant from "@/api/YchConstant";
import {randomString} from "../../../../utils/util";
import {LocaleMixin} from "../js/LocaleMixin";
import {VxeTableMixin} from "../js/VxeTableMixin";

export default {
  name: 'LocaleSelectCommonList',
  mixins: [LocaleMixin, VxeTableMixin],
  props: {
    currentGroupId: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      groupList: [],
      tableNameList: [],
      groupId: null,
      tableName: null,
      common: randomString(32),
      validRules: {},
      url: {
        getCommonGroupList: YchConstant.PREFIX_EFORM + '/manage/localeProvider/getCommonGroupList',
        getCommons: YchConstant.PREFIX_EFORM + '/manage/localeProvider/getCommons',
        getTableCols: YchConstant.PREFIX_EFORM + '/manage/localeProvider/getTableCols',
        copyFromTable: YchConstant.PREFIX_EFORM + '/manage/localeProvider/copyFromTable',
      }
    }
  },
  computed: {
    isCommon() {
      return this.tableName === this.common
    }
  },
  created() {
    getAction(this.url.getCommonGroupList, {groupId: this.currentGroupId}).then((res) => {
      if (res.success) {
        this.groupList = res.result.groupList || []
        this.tableNameList = res.result.tableNameList || []
        this.tableNameList.push({
          key: this.common,
          title: this.$t('m.eform.localeProvider.label.other'),
        })
        if (this.groupList.length > 0) {
          this.changeGroupId(this.groupList[0].key)
        }
      } else {
        this.messageUtil.warning(res.message)
      }
    })
  },
  methods: {
    async loadList() {
      this.loading++
      let res;
      const param = this.getPageQuery()
      if (this.isCommon) {
        param['groupId'] = this.groupId
        res = await getAction(this.url.getCommons, param)
      } else {
        param['tableName'] = this.tableName
        res = await getAction(this.url.getTableCols, param)
        // 为方便历史数据刷新，如果是第一次，则自动初始化
        if (res.success && res.result.records.length === 0 && param.pageNo === 1) {
          await this.copyFromTable(true)
          res = await getAction(this.url.getTableCols, param)
        }
      }
      if (res.success) {
        this.tableData = res.result.records
        this.setPageTotal(res)
      } else {
        this.tableData = []
        this.messageUtil.warning(res.message)
      }
      this.loading--
    },
    changeGroupId(groupId) {
      this.groupId = groupId
      this.tableName = this.common
      this.loadList()
    },
    changeTableName(tableName) {
      this.tableName = tableName
      this.loadList()
    },
    selected({row}) {
      this.$emit("selected", row.code)
    },
  }
}
</script>
